<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘</title>
    <style>
        #outer {
            width: 750px;
            height: 600px;
            border: 1px solid #999;
            margin: auto;
        }

        #header {
            border: 1px solid #999;
            width: 748px;
            height: 400px;
        }

        /* #footer {
            border: 1px solid #999;
            width: 748px;
            height: 198px;
        }

        #footer_middle {
            border: 1px solid #999;

            width: 200px;
            height: 138px;
            position: relative;
            left: 130px;
            top: 30px;
        }

        #footer_middle2 {
            border: 1px solid #999;

            width: 50px;
            height: 50px;
            position: relative;
            left: 600px;
            top: -30px;
        }

        #footer_middle3 {
            border: 1px solid #999;

            width: 50px;
            height: 50px;
            position: relative;
            left: 660px;
            top: -75px;
        } */
        #esc{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            margin-left: 1px;
            margin-top: 1px;
        }
        #f1{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 37px;
            top:-32px;
        }
        #f2{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 74px;
            top:-64px;
        }
        #f3{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 111px;
            top:-96px;
        }
        #f4{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 148px;
            top:-128px;
        }
        #f5{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 185px;
            top:-160px;
        }
        #f6{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 222px;
            top:-192px;
        }
        #f7{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 259px;
            top:-224px;
        }
        #f8{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 296px;
            top:-256px;
        }
        #f9{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 333px;
            top:-288px;
        }
        #f10{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 370px;
            top:-320px;
        }
        #f11{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 407px;
            top:-352px;
        }
        #f12{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 444px;
            top:-384px;
        }
        #prtscr{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 481px;
            top:-416px;
        }
        #insert{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 518px;
            top:-448px;
        }
        #delete{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 555px;
            top:-480px;
        }
        #dunhao{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 1px;
            top:-475px;
        }
        #gantanhao{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 37px;
            top:-508px;
        }
        #aerfa{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 74px;
            top:-540px;
        }
        #jing{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 111px;
            top:-572px;
        }
        #meiyuan{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 148px;
            top:-604px;
        }
        #baifen{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 185px;
            top:-636px;
        }
        #jian{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 222px;
            top:-668px;
        }
        #yu{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 259px;
            top:-700px;
        }
        #xing{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 296px;
            top:-732px;
        }
        #zuo{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 333px;
            top:-764px;
        }
        #you{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 370px;
            top:-796px;
        }
        #xia{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 407px;
            top:-828px;
        }
        #jia{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 444px;
            top:-860px;
        }
        #back{
            border: 1px solid #999;
            width: 100px;
            height: 30px;
            position: relative;
            left: 481px;
            top:-892px;
        }
        #tab{
            border: 1px solid #999;
            width: 45px;
            height: 30px;
            position: relative;
            left: 1px;
            top:-887px;
        }
        #q{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 53px;
            top:-919px;
        }
        #w{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 90px;
            top:-951px;
        }
        #e{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 127px;
            top:-983px;
        }
        #r{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 164px;
            top:-1015px;
        }
        #t{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 201px;
            top:-1047px;
        }
        #y{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 238px;
            top:-1079px;
        }
        #u{
            border: 1px solid #999;
            width: 30px;
            height: 30px;
            position: relative;
            left: 275px;
            top:-1111px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="header">
            <div id="header_left">
                <div id = "first">
                    <div id = "esc">esc</div>
                    <div id = "f1">f1</div>
                    <div id = "f2">f2</div>
                    <div id = "f3">f3</div>
                    <div id = "f4">f4</div>
                    <div id = "f5">f5</div>
                    <div id = "f6">f6</div>
                    <div id = "f7">f7</div>
                    <div id = "f8">f8</div>
                    <div id = "f9">f9</div>
                    <div id = "f10">f10</div>
                    <div id = "f11">f11</div>
                    <div id = "f12">f12</div>
                    <div id = "prtscr">prt</div>
                    <div id = "insert">ins</div>
                    <div id = "delete">del</div>
                    <div id = "dunhao">~`</div>
                    <div id = "gantanhao">!1</div>
                    <div id = "aerfa">@2</div>
                    <div id = "jing"">#3</div>
                    <div id = "meiyuan">$4</div>
                    <div id = "baifen">%5</div>
                    <div id = "jian">^6</div>
                    <div id = "yu">&7</div>
                    <div id = "xing">*8</div>
                    <div id = "zuo">(9</div>
                    <div id = "you">)0</div>
                    <div id = "xia">-_</div>
                    <div id = "jia">+=</div>
                    <div id ="back">backspace</div>
                    <div id ="tab">tab</div>
                    <div id = "q">Q</div>
                    <div id = "w">W</div>
                    <div id = "e">E</div>
                    <div id = "r">R</div>
                    <div id = "t">T</div>
                    <div id = "y">Y</div>
                    <div id = "u">U</div>
            </div>
            <div id="header_right">
                <div id="one">
                     
                </div>
                <div id="two">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div id="three">
                    <div id="three_left"></div>
                    <div id="three_right"></div>
                </div>
                <div id="four">
                    <div id="four_left">
                        <div id="four_left_1">
                            <div id="up"></div>
                            <div id="down"></div>
                        </div>
                        <div id="four_left_2"></div>
                    </div>
                    <div id="four_right"></div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div id=footer_middle></div>
            <div id="footer_middle2"> </div>
            <div id="footer_middle3"> </div>
        </div>
    </div>
</body>
</html>